<template>
  <scroll-view
    class="article-list"
    scroll-y
    enable-flex
    @scrolltolower="loadMore"
  >
    <view
      class="list-item u-border-bottom"
      v-for="(item, index) in list"
      :key="item.articleId"
      :item="item"
      @click="onClick(item)"
    >
      <view class="list-item-top">
        <view class="cover" v-if="item.thumb">
          <image :src="item.thumb"></image>
        </view>
        <view class="title u-line-3">
          {{ item.title }}
        </view>
      </view>
      <view class="list-item-bottom">
        <view class="cnt-item" @click.stop="handlePraise(item, index)">
          <text v-if="item.isPraise == 1" class="icon icon-like-on"></text>
          <text v-else class="icon icon-like"></text>
          <text>{{ item.likeCnt }}</text>
        </view>
        <view class="cnt-item">
          <text class="icon icon-comment"></text>
          <text>{{ item.cCnt }}</text>
        </view>
        <view class="cnt-item">
          <text class="icon icon-eye"></text>
          <text>{{ item.vCnt }}</text>
        </view>
        <view class="cnt-item">
          <text>{{ item.ctime }}</text>
        </view>
      </view>
    </view>
    <!-- <u-loadmore
      v-if="list.length || !loaded"
      class="list-more"
      :status="moreLoading"
      :load-text="loadText"
    />
    <Empty
      v-if="loaded && !list.length"
      :baseImg="emptyImg"
      text="暂无相关内容"
      :fontWeight="400"
      class="empty"
    /> -->
  </scroll-view>
</template>

<script>
import Empty from "@/components/Empty.vue";
import { addArticlePraise } from "@/api/modules/career";

export default {
  components: {
    Empty,
  },
  props: {
    list: {
      type: Array,
      default: [],
    },
    
  },
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      pageParams: {
        pageNo: 0,
        pageSize: 20,
      },
      moreLoading: "loadmore",
      loadText: {
        loadmore: "已经到底啦",
        loading: "加载中",
        nomore: "已经到底啦",
      },
      loaded: false,
      emptyImg: this.$imgBaseSelf + "common/empty_1.png",
    };
  },
 
  onLoad(opt) {
    console.log("opt");
  },
  methods: {
    loadMore() {
      // if (this.moreLoading == "loading" || this.moreLoading == "nomore") return;
      console.log("触发了loadMore");
      // this.getData(true);
      this.$emit("listLoadMore");
    },
    // getData(isMore) {
    //   const params = {
    //     pageNo: this.pageParams.pageNo,
    //     pageSize: this.pageParams.pageSize,
    //     issueId: this.issueId,
    //   };
    //   this.moreLoading = "loading";
    //   getCareerArticleListEt(params).then((res) => {
    //     this.loaded = true;
    //     this.moreLoading = "loadmore";
    //     if (res.code == 200) {
    //       if (isMore) {
    //         this.list.push(...res.data);
    //       } else {
    //         this.list = res.data;
    //       }

    //       if (this.pageParams.pageNo >= res.pageparam.pages) {
    //         this.moreLoading = "nomore";
    //       }
    //       this.pageParams.pageNo++;
    //     } else {
    //       this.moreLoading = "nomore";
    //       uni.showToast({
    //         title: res.status_desc,
    //         icon: "none",
    //       });
    //     }
    //   });
    // },
    onClick(item) {
      uni.navigateTo({
        url: "/pagesSub/career/careerInfo/articleDetail?id=" + item.articleId,
      });
    },
    // 点赞
    handlePraise(item, index) {
      return false;
      if (!this.personId) {
        let fullPath =
          getCurrentPages()[getCurrentPages().length - 1].$page.fullPath;
        let returnUrl = encodeURIComponent(fullPath);
        uni.showModal({
          title: "提示",
          content: "该功能需要登录",
          success: function (res) {
            if (res.confirm) {
              uni.navigateTo({
                url: "/pagesSub/public/loginMode/index?returnUrl=" + returnUrl,
              });
            } else if (res.cancel) {
              console.log("用户点击取消");
            }
          },
        });
        return;
      }
      let type = item.isPraise == 1 ? "cancel" : "add";
      const params = {
        person_id: this.personId,
        article_id: item.articleId,
        type: type,
      };
      addArticlePraise(params).then((res) => {
        if (res.code == 200) {
          this.$set(item, "isPraise", item.isPraise == 1 ? 0 : 1);
        }
        uni.showToast({
          title: res.desc,
          icon: "none",
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.article-list {
  height: 100%;
  padding: 0 32rpx;
  background-color: $uni-bg-color;
  box-sizing: border-box;
  .list-item {
    padding: 24rpx 0 40rpx 0;
    &:last-of-type::after {
      border-bottom: 0 !important;
    }
    &-top {
      display: flex;
      margin-bottom: 32rpx;
      .title {
        flex: 1;
        height: 100%;
        margin-top: 20rpx;
      }
      .cover {
        margin-right: 32rpx;
        border-radius: 8rpx;
        image {
          width: 182rpx;
          height: 96rpx;
          border-radius: 8rpx;
        }
      }
    }
    &-bottom {
      display: flex;
      .cnt-item {
        display: flex;
        align-items: center;
        margin-right: 40rpx;
        color: #bfbfbf;

        &:last-child {
          margin: 0;
        }
      }

      .icon {
        width: 32rpx;
        height: 32rpx;
        vertical-align: bottom;
        margin-right: 12rpx;
      }
      .icon-like {
        background-image: url($img-base + "consultant/thumb.svg");
      }
      .icon-like-on {
        background-image: url($img-base + "consultant/thumb.svg");
      }
      .icon-comment {
        background-image: url($img-base + "consultant/comment.svg");
      }
      .icon-eye {
        background-image: url($img-base + "consultant/eye.svg");
      }
    }
  }
}
</style>